<template>
  <div>
     
    <el-form ref="form" :model="form" label-width="120px">
         <el-form-item label="图书封面"> <template>
            <el-image
          style="width: 100px; height: 100px"
          :src="form[id].img"
          :fit="fill"
        ></el-image>
         </template></el-form-item>
      <el-form-item label="待添加书名"> {{ form[id].title }} </el-form-item>
      <el-form-item label="ISBN"> {{ form[id].isbn }} </el-form-item>
      <el-form-item label="库存设置">
        <el-input-number
          v-model="form[id].num"
          size="small"
          @change="handleChange"
          :min="1"
          :max="10"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
     
      <el-form-item label="是否上架">
        <el-switch v-model="form[id].delivery"></el-switch>
      </el-form-item>
        <el-form-item v-if="book.length > 1">
        <el-button
          icon="el-icon-arrow-left"
          circle
          @click="jian"
          :disabled="this.id == 0 ? true : false"
        ></el-button>
        <el-button
     
          icon="el-icon-arrow-right"
          circle
           :disabled="this.id== this.book.length-1? true : false"
          @click="jia"
          
        ></el-button>
      </el-form-item>
      <el-form-item label="选择分类">
        <el-cascader
          ref="casc"
          v-model="this.class"
          :options="productCateOptions"
          :props="{ expandTrigger: 'hover', label: 'label' }"
          @visible-change="handleChange1"
        
          @change="handleChange2"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="添加备注">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handlePrev">上一步</el-button>
        <el-button type="primary" @click="submitForm"
          >下一步，确认添加信息确认提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { get_classifylist } from "@/api/book";
import store from "@/store/index";
export default {
  props: {
    book: {
      type: Array,
       default: 0
    },
    active: {
      type: Number,
      default: 0,
    },
    num:{
        type:Array,
        default:0
    }
  },
  data() {
    return {
      form: [],
      id:0,
    class: "",
      productCateOptions: [],
    };
  },
  watch: {
    active(val) {
        console.log(this.book)
      if (val == 2) {
        console.log(this.book);
      
        
       if(this.form==''){
            this.form=[]
        var date = new Date();
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() + " ";
        var h = date.getHours() + ":";
        var m = date.getMinutes() + ":";
        var s = date.getSeconds() + "";
        for(let i=0;i< this.book.length;i++){
            let item={
                title:this.book[i].name,
                isbn:this.book[i].code,
                num:1,
               adim :this.$store.getters.name,
                delivery:true,
            
                time:Y + M + D + h + m + s,
                img:this.book[i].photoUrl
            }
            this.form.push(item);

        }
       } else{
           console.log(this.num)
           this.form=this.num
           if(this.num!=''){
               this.form.forEach(function(item,index){
                   this.$set(item,'num',this.num[index])
                  
               })
           }
           console.log(this.form)
       }
      
        console.log(this.form);
      
     
        
        
      }
    },
    id(val){
      
    }
  },
  methods: {
       jian() {
      this.id--;
    },
    jia() {
      this.id++;
    },
    handleChange2(val) {
      console.log(node);
    },

    submitForm() {
      let node = this.$refs["casc"].getCheckedNodes();
        console.log(node);
        if(node==''){
            this.$message({
                message: "请选择分类",
                type: "warning"
            });
            return;
        }else{
            console.log('error submit!!')
           
      console.log(this.form);
      this.$emit("nextStep", this.form,node);
        }
      
      
  
    },
    handlePrev() {
      console.log("上一步");
      this.$emit("prevStep");
      this.form=0
    },
    get_class() {
      let arr = [];
      get_classifylist().then((res) => {
        console.log(res);

        arr = res.data.data;
        this.productCateOptions = arr.map((res) => {
          return {
            label: res.classname,
            value: res.categoriesId,
            children: res.CategoriesList.map((res) => {
              return {
                label: res.classname,
                value: res.categoriesId,
              };
            }),
          };
        });
        console.log(this.productCateOptions);
      });
    },
    handleChange1() {
      this.get_class();
    },
  },
};
</script>

<style></style>
